<template>
	<view class="input">

		<view class="input-wrapper">
			<view class="input-wrapper-input">
				<view class="input-wrapper-input-left">
					<icon type="search" size="26rpx" color="#98A5B3"></icon>
				</view>
				<view class="input-wrapper-input-right">
					<input type="text" class="input" :placeholder="placeholder" @input="onInput" @confirm="onConfirm">
				</view>
			</view>
			<view class="input-wrapper-right" v-if="ShowIcon">

				<view class="icon-container u-flex " @click="onIcon">
					<iconfont :name="`custom-icon-${iconType.iconName}`" color="#409EFF" />
					<text class="icon-text">{{iconType.label}}</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import { Storage_IsFactory } from '@/common/index.js'
	import CustomIconName from '@/common/customIconFontName.js'
	export default {
		name: 'InputSearch',
		props: {
			value: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '关键字/词'

			},
			showIcon: {
				type: Boolean,
				default: true
			},
			iconType: {
				type: Object,
				default: () => {
					return CustomIconName.Filter
				}
			},
			// 废弃
			showAddIcon: Boolean


		},

		computed: {
			ShowIcon() {
				if (this.showIcon) {
					if ([CustomIconName.Add.iconName, CustomIconName.Reserve.iconName].includes(this.iconType.iconName)) {

						return !(this.isFactory)
					}
					return true
				} else {
					return false
				}
			},

		},
		data() {
			return {
				isFactory: ''
			}
		},
		mounted() {
			this.isFactory = Storage_IsFactory()
		},
		methods: {
			onInput(e) {
				this.$emit('input', e.detail.value)
			},
			onConfirm(e) {
				this.$emit('onConfirm', e.detail.value)
			},
			onIcon() {
				this.$emit('onIcon')

				this.$emit('onFilter')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon {
		&-container {
			flex-direction: column;
		}

		&-text {
			font-weight: 400;
			font-size: 24rpx;
			color: #409EFF;
		}
	}

	.input {
		padding: 30rpx;
		background-color: #fff;

		&-wrapper {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;


			&-input {

				flex: 1;
				background-color: #F5F6F7;
				height: 76rpx;
				display: flex;
				align-items: center;
				border-radius: 38px;
				overflow: hidden;

				&-left {
					flex-basis: 26rpx;
					padding-left: 22rpx;
					padding-top: 6rpx;

					input {
						color: #0F2E4D;
					}
				}

				&-right {
					padding: 0 24rpx 0 12rpx;
					flex: 1;

					input {
						height: 100%;
						background-color: #F5F6F7;
					}
				}
			}

			&-right {
				// flex: 1;
				flex-basis: 20%;
				width: 20%;
				text-align: center;

				img {
					width: 68rpx;
					height: 68rpx;
				}
			}
		}

	}
</style>
